import React from 'react';
import { Select, Checkbox } from 'antd';
import { CaretDownOutlined } from '#/utils/antdIcons';
import styles from './index.less';
function TRMulSelect(props) {
  const { onChange, value, options } = props;
  return (
    <Select
      mode="multiple"
      style={{ width: 228 }}
      maxTagCount={2}
      dropdownClassName={styles.dropdown}
      suffixIcon={<CaretDownOutlined />}
      dropdownRender={() => {
        return (
          <>
            <Checkbox
              indeterminate={value.length !== 0 && value.length !== options.length}
              onChange={() =>
                onChange(value.length !== options.length ? options.map((v) => v.value) : [])
              }
              checked={value.length === options.length}
            >
              全选
            </Checkbox>
            <Checkbox.Group options={options} value={value} onChange={(val) => onChange(val)} />
          </>
        );
      }}
      {...props}
    />
  );
}

export default TRMulSelect;
